<!--
 * @Author       : wfl
 * @LastEditors: ww
 * @description  :
 * @updateInfo   :
 * @Date         : 2022-11-24 16:36:43
 * @LastEditTime: 2023-06-30 15:56:18
-->
<script lang="ts" setup name="ApprovalNodeConfig">
import { computed, reactive, ref } from 'vue'
import { IkingPicker } from 'iking-web-ui'
import OrgItems from '@main/views/approve-workflow/WorkFlow/OrgItems.vue'
import { Plus } from '@element-plus/icons-vue'
import { EApprovalEmpty, EApproveCategory, EApproveCategoryEdit, EMultipleSignature, ESelectRange } from '@main/views/approve-workflow/enum'
import { useApproveObject } from './useApproveObject'

const flowStore = useFlowStore()

// const props = defineProps({
//   config: {
//     type: Object,
//     default: () => {
//       return {}
//     }
//   }
// })

const { baseUrl } = useHttpUrl()
const token = useToken()

const {
  EConfigType,
  orgPickerShow,
  pickState,
  selectUser,
  selectNoSetUser,
  selectRole,
  handSelectRoleUser
} = useApproveObject()

const state = reactive({
  // 指定成员时 picker组件状态
  showOrgSelect: false,
  approval: {
    objTypes: Object.entries(EApproveCategoryEdit).map(([name, type]) => {
      return {
        name,
        type
      }
    }) as any,
    scopeType: Object.entries(ESelectRange).map(([name, type]) => {
      return {
        name,
        type
      }
    }) as any,
    approvalEmpty: Object.entries(EApprovalEmpty).map(([name, type]) => {
      return {
        name,
        type
      }
    }) as any
  }
})

const nodeProps = computed(() => {
  return flowStore.selectedNode.props
})

const pickerValue: any = ref('')

const showMode = computed(() => {
  switch (nodeProps.value.approvalCategory) {
    case EApproveCategory.指定成员:
      return nodeProps.value.assignedUser.length > 1
    case EApproveCategory.发起人自选:
      return nodeProps.value.selfSelect.multiple
    case EApproveCategory.发起人部门主管:
      return nodeProps.value.formUser !== ''
    default:
      return false
  }
})

const ApproveCategory = EApproveCategory
const MultipleSignature = EMultipleSignature
const SelectRange = ESelectRange

// const removeOrgItem = (index: any) => {
//   select.value.splice(index, 1)
// }

const { showEmptyApprove } = useFieldsRole(nodeProps)
// picker组件确定后
const handSelectPicker = (val: any) => {
  if (pickState.type === EConfigType.对象) {
    nodeProps.value.assignedUser = val.list
  }
  else if (pickState.type === EConfigType.为空时) {
    nodeProps.value.reserveApprovals = val.list
    nodeProps.value.nobody.assignedUser = val.list
  }
}

watch(
  () => [
    nodeProps.value.approvalCategory,
    nodeProps.value.initiatorSpecifiedScopeType
  ],
  () => {
    nodeProps.value.assignedUser = []
    pickerValue.value = []
  }
)
</script>

<template>
  <el-form label-position="top" label-width="90px">
    <el-form-item label="审批对象" prop="text" class="user-type">
      <template #label>
        <span class="ikflow-flow-config-label">审批对象</span>
      </template>
      <el-radio-group
        v-model="nodeProps.approvalCategory"
        class="ikflow-flow-radio"
      >
        <el-radio
          v-for="t in state.approval.objTypes"
          :key="t.type"
          :label="t.type"
        >
          {{ t.name }}
        </el-radio>
      </el-radio-group>
    </el-form-item>

    <template v-if="nodeProps.approvalCategory === ApproveCategory.指定成员">
      <el-divider />
      <el-form-item
        label="⚙ 添加成员  最多不能超过20人"
        prop="text"
        class="user-type"
      >
        <template #label>
          <span class="ikflow-flow-config-label">
            添加成员
            <span class="info">最多不能超过20人</span>
          </span>
        </template>
        <div>
          <el-button
            size="small"
            :icon="Plus"
            type="primary"
            @click="selectUser"
          >
            选择人员
          </el-button>
          <OrgItems v-model="nodeProps.assignedUser" />
        </div>
      </el-form-item>
    </template>
    <template
      v-else-if="nodeProps.approvalCategory === ApproveCategory.发起人自选"
    >
      <el-divider />
      <el-form-item
        label="⚙ 选择范围"
        prop="initiatorSpecifiedScopeType"
        class="user-type"
      >
        <template #label>
          <span class="ikflow-flow-config-label">选择范围</span>
        </template>
        <el-radio-group
          v-model="nodeProps.initiatorSpecifiedScopeType"
          class="ikflow-flow-radio"
        >
          <el-radio
            v-for="t in state.approval.scopeType"
            :key="t.type"
            :label="t.type"
          >
            {{ t.name }}
            <!-- <el-button
              v-if="
                nodeProps.initiatorSpecifiedScopeType !== SelectRange.全公司
                  && nodeProps.initiatorSpecifiedScopeType === t.type
              "
              link
              type="primary"
              class="inline-edit"
              @click="handSelectRoleUser(t)"
            >
              {{ nodeProps.assignedUser?.length ? '修改' : '添加' }}
            </el-button> -->
            <IkSvgIcon
              v-if="nodeProps.initiatorSpecifiedScopeType !== SelectRange.全公司 && nodeProps.initiatorSpecifiedScopeType === t.type"
              name="iksvg_bianji"
              class="ml-[4px]"
              :title="`选择${t.type === ESelectRange.按成员指定 ? '人员' : '角色'}`"
              @click="handSelectRoleUser(t)"
            />
          </el-radio>
        </el-radio-group>

        <OrgItems v-model="nodeProps.assignedUser" />
      </el-form-item>
      <el-form-item
        label="⚙ 选人方式"
        class="ikflow-flow-config-label"
        prop="selfSelect.multiple"
      >
        <el-radio-group
          v-model="nodeProps.selfSelect.multiple"
          class="ikflow-flow-radio"
        >
          <el-radio :label="false">自选一个人</el-radio>
          <el-radio :label="true">自选多个人</el-radio>
        </el-radio-group>
      </el-form-item>
    </template>
    <div
      v-else-if="nodeProps.approvalCategory === ApproveCategory.发起人部门主管"
    >
      <el-divider />
      <el-form-item label="指定主管" prop="text">
        <span>发起人的第 </span>
        <el-input-number
          v-model="nodeProps.leader.level"
          :min="1"
          :max="20"
          :step="1"
          size="small"
        />
        <span> 级主管</span>
        <div style="color: #409eff; font-size: small;">
          👉 直接主管为 第 1 级主管
        </div>
      </el-form-item>
    </div>
    <div v-else-if="nodeProps.approvalCategory === ApproveCategory.指定角色">
      <el-button
        size="small"
        :icon="Plus"
        type="primary"
        @click="selectRole"
      >
        选择角色
      </el-button>
      <OrgItems v-model="nodeProps.assignedUser" />
    </div>
    <div v-else>
      <span class="item-desc">发起人自己作为办理人进行审批</span>
    </div>

    <template v-if="showEmptyApprove">
      <el-divider />
      <el-form-item label="办理人为空时" prop="handler" class="line-mode">
        <template #label>
          <span class="ikflow-flow-config-label">办理人为空时 </span>
        </template>
        <el-radio-group
          v-model="nodeProps.nobody.handler"
          class="ikflow-flow-radio"
        >
          <el-radio
            v-for="t in state.approval.approvalEmpty"
            :key="t.type"
            :label="t.type"
            class="w-full"
          >
            {{ t.name }}
          </el-radio>
        </el-radio-group>

        <div
          v-if="nodeProps.nobody.handler === 'TO_USER'"
          style="margin-top: 10px;"
        >
          <el-button
            size="small"
            :icon="Plus"
            type="primary"
            @click="selectNoSetUser"
          >
            选择人员
          </el-button>
          <OrgItems v-model="nodeProps.assignedUser" />
        </div>
      </el-form-item>
    </template>

    <div v-if="showMode">
      <el-divider />
      <el-form-item
        label="多人审批方式"
        prop="text"
        class="approve-mode"
      >
        <template #label>
          <span class="ikflow-flow-config-label">多人审批方式 </span>
        </template>
        <el-radio-group v-model="nodeProps.mode">
          <el-radio
            :label="MultipleSignature.会签"
            class="w-full"
          >
            会签（须所有办理人同意）
          </el-radio>
          <el-radio
            :label="MultipleSignature.或签"
            class="w-full"
          >
            或签（一名办理人同意或拒绝即可）
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </div>
  </el-form>
  <IkingPicker
    ref="refIkingPicker"
    v-model="pickerValue"
    v-model:show="orgPickerShow"
    :api="{
      methods: 'post',
      url: `${baseUrl}/server/component/pick/mix`,
      headers: {
        'Content-Type': 'application/json;charset=UTF-8',
        'Authorization': token,
      },
    }"
    :multiple="pickState.multiple"
    :tabs="['group', 'role', 'post']"
    :choose-type="pickState.chooseType"
    :type-option="{ dep: 'DEPT', user: 'USER', role: 'ROLE', post: 'POST' }"
    :prop-option="{
      name: 'elementName',
      id: 'elementId',
      type: 'elementType',
    }"
    @ok="handSelectPicker"
  />
</template>

<style lang="scss" scoped>
.ikflow-flow-radio {
  label {
    min-width: 130px;
    margin-right: 20px;

    :deep(.el-radio__label) {
      display: inline-flex;
      align-items: center;
    }

    .inline-edit {
      padding: 0 8px;
    }
  }
}
</style>
